<template>
	<view class="container">
		<view class="background-wrap">
			<image class="bg-image" src="/static/images/ic_mine_bg.png" mode="aspectFill" />
		</view>

		<view class="top-container" :style="{paddingTop: statusBarHeight + 40 + 'px'}">
			<view class="user_container">
				<view class="user-info-container">
					<view class="avatar_container" @click="gotoSetting">
						<image src="/static/images/ic_login_head.png" class="avatar"></image>
					</view>

					<view class="user-info">
						<view style="display: flex; align-items: center; margin-bottom: 10rpx;">
							<view class="user-info-name">
								{{userName}}
							</view>
							<image style="height: 40rpx; width: 108rpx; margin-left: 6rpx;" :src="getLevelImg()"
								v-if=""></image>
						</view>
						<view class="user-id-container">
							<text>编号：{{userId}}</text>
							<image src="/static/images/ic_copy.png" @click.stop="$app.toCopy(userId.toString())">
							</image>
						</view>
						<view v-if="isShow" class="user_state_container"
							:class="{active : realName == '初级认证' || realName == '高级认证'}" @click="toRealNameList">
							{{realName}}
						</view>
					</view>
				</view>

				<image src="/static/images/ic_setting.png" style="" class="setting" @click="gotoSetting()"></image>
			</view>

			<!-- <view class="user_balance_container">
				<view class="balance-usable">
					<view class="balance_title">账户余额</view>
					<view class="balance_text">￥{{balance}}</view>
				</view>
				<view class="balance-disable">
					<view class="balance_title">冻结金额</view>
					<view class="balance_text">￥{{auditAmount}}</view>
				</view>
			</view> -->

			<view class="user_new_balance_container" v-if="isShow">
				<view
					style="display: flex; justify-content: space-between; margin-top: 24rpx; margin-left: 54rpx; margin-right: 46rpx;">
					<view class="balance-title">
						<text>账户余额(元)</text>
						<image style="height: 28rpx; width: 32rpx; margin-left: 18rpx;"
							src="/static/images/ic_refresh.png" @click="onRefreshUser"></image>
					</view>
					<image style="height: 28rpx; width: 28rpx;" src="/static/images/ic_hint.png" @click="showTipPop()">
					</image>
				</view>
				<view
					style="margin-top: 14rpx; color: #2F7FFC; font-size: 56rpx; margin-left: 56rpx; font-weight: bold;">
					{{balance}}
				</view>
				<view class="balance-content">
					<view class="balance-item">
						<view class="balance-title">
							<text>未结算金额(元)</text>
						</view>
						<view class="balance-item-price">
							{{unsettledAmount}}
						</view>
					</view>

					<view class="balance-item">
						<view class="balance-title">
							<text>可提现金额(元)</text>
						</view>
						<view class="balance-item-price">
							{{canWithdrawBalance}}
						</view>
					</view>

					<view class="balance-item">
						<view class="balance-title">
							<text>已结算金额(元)</text>
						</view>
						<view class="balance-item-price">
							{{totalSettAmount}}
						</view>
					</view>

					<view class="balance-item">
						<view class="balance-title">
							<text>冻结金额(元)</text>
						</view>
						<view class="balance-item-price">
							{{auditAmount}}
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="function-container">
			<!-- 标题 -->
			<view class="title">常用功能</view>

			<!-- 正式列表 -->
			<view class="function-list" v-if="isShow">
				<view class="function-item" @click="navigateTo('withdrawal')">
					<image src="/static/images/ic_mine_with.png" mode="widthFix"></image>
					<text>我要提现</text>
				</view>
				<view class="function-item" @click="navigateTo('account')">
					<image src="/static/images/ic_mine_account.png" mode="widthFix"></image>
					<text>提现账号</text>
				</view>
				<view class="function-item" @click="navigateTo('withdrawal_record')">
					<image src="/static/images/ic_mine_record.png" mode="widthFix"></image>
					<text>提现记录</text>
				</view>
				<view class="function-item" @click="navigateTo('transactions')">
					<image src="/static/images/ic_mine_balance_record.png" mode="widthFix"></image>
					<text>账户流水</text>
				</view>
				<view class="function-item" @click="navigateTo('order')">
					<image src="/static/images/ic_mine_all_order.png" mode="widthFix"></image>
					<text>全部订单</text>
				</view>
				<view class="function-item" @click="navigateTo('batch-orders')">
					<image src="/static/images/ic_mine_some_order.png" mode="widthFix"></image>
					<text>批量订单</text>
				</view>
				<view class="function-item" @click="navigateTo('announcements')">
					<image src="/static/images/ic_mine_notice.png" mode="widthFix"></image>
					<text>平台公告</text>
				</view>
				<view class="function-item" @click="navigateTo('help')">
					<image src="/static/images/ic_mine_help.png" mode="widthFix"></image>
					<text>常见问题</text>
				</view>

				<view class="function-item" @click="showPop()">
					<image src="/static/images/ic_mine_customer.png" mode="widthFix"></image>
					<text>我的客服</text>
				</view>
				<view class="function-item" @click="navigateTo('company')">
					<image src="/static/images/ic_mine_company.png" mode="widthFix"></image>
					<text>企业招商</text>
				</view>
				<view class="function-item" @click="navigateTo('sale-flow')">
					<image src="/static/images/ic_mine_sale.png" mode="widthFix"></image>
					<text>卖卡流程</text>
				</view>
				<view class="function-item" @click="navigateTo('my-invitation')">
					<image src="/static/images/ic_mine_invita.png" mode="widthFix"></image>
					<text>我的邀请</text>
				</view>
			</view>

			<!-- 审核列表 -->
			<view class="function-list" v-else>
				<view class="function-item" @click="showPop()">
					<image src="/static/images/ic_mine_customer.png" mode="widthFix"></image>
					<text>我的客服</text>
				</view>
			</view>
		</view>

		<custom-tabbar value="mine"></custom-tabbar>

		<!-- <u-popup :show="showPopup" @close="closePop()" round="20">
			<view class="popup-container">
				<view class="popup-header">
					<view style="color: #323233; font-size: 32rpx;">请选择惠收卡客服</view>
					<view style="color: #969799; font-size: 28rpx; margin-top: 16rpx;">上班时间：周一至周日 09:00~23:50</view>
				</view>
				<view class="popup-conten">
					<view class="popup-item" v-for="(item,index) in serviceList" :key="index"
						@click="handleService(item.type)">
						<image :src="item.url" mode="heightFix"></image>
						<view style="margin-left: 18rpx;">{{item.label}}</view>
					</view>
				</view>
				<view class="popup-cancel" @click="closePop">取消</view>
			</view>
		</u-popup> -->

		<service-popup :show="showPopup" @update:show="handleShowUpdate"></service-popup>

		<u-popup :show="showAuthPopup" @close="closeAuthPop()" bgColor="transparent" mode="center">
			<view class="popup-auth-container">
				<image
					style="width: 32rpx; height: 32rpx; align-self: flex-end; margin-top: 32rpx; margin-right: 38rpx;"
					src="/static/images/ic_auth_pop_close.png" @click="closeAuthPop"></image>
				<image style="width: 190rpx; height: 146rpx; align-self: center;"
					src="/static/images/ic_auth_pop_icon.png"></image>
				<view
					style="text-align: center; margin-top: 48rpx; font-size: 48rpx; color: #0C0C0C; font-weight: 500;">
					实名认证</view>
				<view style="text-align: center; margin-top: 28rpx; font-size: 32rpx; color: rgba(0, 0, 0, 0.63);">
					请完成初级认证，认证后可销卡和提现
				</view>
				<view
					style="margin-left: 86rpx; margin-right: 86rpx; text-align: center; margin-top: 60rpx; padding: 18rpx 0; border-radius: 41rpx; background-color: #2F7FFC; color: white; font-size: 32rpx;"
					@click="toRealNameList">去完成</view>
			</view>
		</u-popup>

		<u-popup :show="showTipPopup" @close="closeTipPop()" round="36rpx" mode="center" :safeAreaInsetBottom="false">
			<view class="tip-pop-container">
				<view style="text-align: center; margin-top: 30rpx; font-size: 32rpx; color: #000; font-weight: bold;">
					数据说明</view>
				<view style="margin-top: 34rpx; font-size: 28rpx; color: #5C6166; margin-left: 32rpx;">
					1.未结算金额:订单核销成功</view>
				<view style="margin-top: 32rpx; font-size: 28rpx; color: #5C6166; margin-left: 32rpx;">
					2.已结算金额:订单核销总计金额</view>
				<view style="margin-top: 32rpx; font-size: 28rpx; color: #5C6166; margin-left: 32rpx;">
					3.账户余额:可提现金额+安全保障金</view>
				<view style="margin-top: 32rpx; font-size: 28rpx; color: #5C6166; margin-left: 32rpx;">
					4.冻结金额:提现冻结或其他资金冻结</view>
				<view style="width: 100%; height: 2rpx; background-color: #F0F0F0; margin-top: 46rpx;"></view>
				<view
					style="text-align: center; margin-top: 20rpx; margin-bottom: 20rpx; font-size: 32rpx; color: #000; font-weight: bold;"
					@click="closeTipPop()">
					我知道了</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userName: '',
				realName: '',
				userId: '',
				balance: 0,
				auditAmount: 0,
				rightSafeArea: 0,
				statusBarHeight: 20,
				showPopup: false,
				showAuthPopup: false,
				showTipPopup: false,
				appConfig: null,
				credentialLevel: 0,
				totalSettAmount: 0,
				unsettledAmount: 0,
				canWithdrawBalance: 0,
				serviceList: [{
						type: 'qq',
						label: 'QQ在线客服',
						icon: 'qq-fill',
						color: '#12B7F5',
						url: '../../static/images/ic_customer_qq.png'
					},
					{
						type: 'wechat',
						label: '微信在线客服',
						icon: 'weixin-fill',
						color: '#09BB07',
						url: '../../static/images/ic_customer_wx.png'
					},
					{
						type: 'tel',
						label: '电话咨询客服',
						icon: 'phone-fill',
						color: '#2979FF',
						url: '../../static/images/ic_customer_phone.png'
					}
				],
				shareLevel: 0,
				isShow: uni.getStorageSync("isShow"),
			};
		},
		async created() {
			// 获取系统信息
			const systemInfo = uni.getSystemInfoSync()
			//获取状态栏高度
			this.statusBarHeight = systemInfo.statusBarHeight
			console.log("高度", this.statusBarHeight)
			// 微信小程序适配
			// #ifdef MP-WEIXIN
			const menuRect = uni.getMenuButtonBoundingClientRect()
			this.rightSafeArea = systemInfo.windowHeight - menuRect.bottom // 计算右侧避让距离
			// #endif
		},
		async onShow() {
			// if (await this.$app.getIsOffiacal()) {
			// 	this.isOfficical = true;
			// } else {
			// 	this.isTest = true;
			// }
			this.loadUserData();
		},
		methods: {
			getLevelImg() {
				if (this.shareLevel == 1) {
					return "/static/images/ic_invita_0.png";
				} else if (this.shareLevel == 2) {
					return "/static/images/ic_invita_1.png";
				} else if (this.shareLevel == 3) {
					return "/static/images/ic_invita_2.png";
				} else if (this.shareLevel == 4) {
					return "/static/images/ic_invita_3.png";
				}
			},
			async onRefreshUser() {
				this.loadUserData();
			},
			async loadUserData() {
				this.appConfig = await this.$app.getAppConfit();
				const res = await this.$http({
					method: 'GET',
					url: '/user/base/info',
				});
				if (res) {
					const user = res.data;
					this.$app.setUserInfo(user);
					this.userName = user.nickName || '昵称';
					this.balance = user.balance;
					this.auditAmount = user.auditAmount;
					this.userId = user.userId;
					this.credentialLevel = user.credentialLevel;
					this.canWithdrawBalance = user.canWithdrawBalance;
					this.unsettledAmount = user.unsettledAmount;
					this.totalSettAmount = user.totalSettAmount;
					this.shareLevel = user.level;

					if (this.credentialLevel == 0) {
						this.realName = "未认证";
					} else if (this.credentialLevel == 1) {
						this.realName = "初级认证";
					} else {
						this.realName = "高级认证";
					}

					if (this.isShow) {
						// if (!user.isRealName) {
						// 	this.showModal("温馨提示", "您还未进行实名认证，快去认证吧", '/pages/real-name-list/real-name-list', 0);
						// } else {
						// 	if (!user.isSetContract) {
						// 		this.showModal("温馨提示", "您还未签署，快去签署吧", '/pages/real-name-list/real-name-list', 1);
						// 	}
						// }
						if (this.credentialLevel == 0) {
							this.showAuthPop();
						}
					}
				}

			},
			toRealNameList() {
				uni.navigateTo({
					url: '/pages/real-name-list/real-name-list'
				})
			},
			navigateTo(page) {
				if (page == 'withdrawal') {
					if (this.credentialLevel == 0) {
						// this.showModal("温馨提示", "您还未进行实名认证，快去认证吧", '/pages/real-name-list/real-name-list', 0);
						this.showAuthPop()
						return;
					}

					if (!this.$app.isSetFundPassWord()) {
						this.showModal("温馨提示", "您还未设置交易密码，快去设置吧", '/pages/find-fund-password/find-fund-password', 2);
						return;
					}
				} else if (page == 'order') {
					uni.setStorageSync('navTabIndex', 0);
					uni.switchTab({
						url: `/pages/order/order`
					})
					return;
				} else if (page == 'batch-orders') {
					uni.setStorageSync('navTabIndex', 2);
					uni.switchTab({
						url: `/pages/order/order`
					})
					return;
				}
				uni.navigateTo({
					url: `/pages/${page}/${page}`
				});
			},
			gotoSetting() {
				uni.navigateTo({
					url: '/pages/setting/setting'
				})
			},
			// state 0实名 1签署 2设置密码
			showModal(title, content, url, state) {
				let modalConfirmText = ''
				if (state == 0) {
					modalConfirmText = '去实名';
				} else if (state == 1) {
					modalConfirmText = '去签署';
				} else {
					modalConfirmText = '去设置';
				}
				uni.showModal({
					title: title,
					content: content,
					cancelText: "关闭",
					confirmText: modalConfirmText,
					success: res => {
						if (res.confirm) {
							uni.navigateTo({
								url: url,
							})
						}
					}
				});
			},
			showPop() {
				this.showPopup = true;
			},
			closePop() {
				this.showPopup = false;
			},
			showAuthPop() {
				this.showAuthPopup = true;
			},
			closeAuthPop() {
				this.showAuthPopup = false;
			},
			showTipPop() {
				this.showTipPopup = true;
			},
			closeTipPop() {
				this.showTipPopup = false;
			},
			getAuthText() {
				if (this.credentialLevel == 0) {
					return "请完成初级认证，认证后可销卡和提现";
				} else {
					return "请完成高级认证，可提高每日销卡额度"
				}
			},
			// 响应子组件事件，更新状态
			handleShowUpdate(newValue) {
				this.showPopup = newValue;
			},
			handleService(type) {
				console.log(this.appConfig)
				switch (type) {
					case 'qq':
						// 复制qq号
						this.$app.toCopy(this.appConfig.qq)
						break
					case 'wechat':
						// #ifdef MP-WEIXIN
						// 调用企业微信客服聊天
						wx.openCustomerServiceChat({
							extInfo: {
								url: 'https://work.weixin.qq.com/kfid/kfc23a563ee7443bea4'
							},
							corpId: 'ww7362e6d2fe8ba240',
							success: function(response) {
								console.log("客服聊天成功", response);
							},
							fail: function(error) {
								console.log("客服聊天失败", error);
							}
						});
						// #endif
						// #ifdef APP-PLUS
						this.$app.openUrl("https://work.weixin.qq.com/kfid/kfc23a563ee7443bea4", true)
						// #endif
						// #ifdef H5
						this.$app.toCopy("13143488558")
						// #endif
						break
					case 'tel':
						// 拨打客服电话
						// uni.makePhoneCall({
						// 	phoneNumber: this.appConfig.phone
						// })
						this.$app.toCopy(this.appConfig.phone)
						break
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		position: relative;
		width: 100vw;
		height: 100vh;
		background-color: #F7FAFF;
	}

	/* 背景图容器 */
	.background-wrap {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 616rpx;
		/* 控制背景图高度为 Banner 的一半 */
		z-index: 0;
		/* 确保背景图在 Banner 下方 */

		.bg-image {
			width: 100%;
			height: 100%;
		}
	}

	.top-container {
		z-index: 1;
		display: flex;
		flex-direction: column;
		padding: 0 38rpx;
		margin-bottom: 20rpx;

		.user_container {
			z-index: 1;
			display: flex;
			justify-content: space-between;

			.user-info-container {
				display: flex;
				align-items: center;

				.avatar_container {
					width: 110rpx;
					height: 110rpx;
					border-radius: 50%;
					background-color: white;
					display: flex;
					justify-content: center;
					align-items: center;

					.avatar {
						width: 106rpx;
						height: 106rpx;
						border-radius: 50%;
					}
				}

				.user-info {
					margin-left: 30rpx;

					.user-info-name {
						font-size: 32rpx;
						font-weight: 600;
						color: #000;
					}

					.user-id-container {
						display: flex;
						align-items: center;
						color: rgba(0, 0, 0, 0.60);
						font-size: 24rpx;
						margin-bottom: 10rpx;

						image {
							height: 24rpx;
							width: 24rpx;
							margin-left: 26rpx;
						}
					}

					.user_state_container {
						color: rgba(0, 0, 0, 0.60);
						font-size: 24rpx;
					}

					.user_state_container.active {
						color: #2F7FFC;
					}
				}
			}

			.setting {
				width: 40rpx;
				height: 40rpx;
        z-index: 1;
			}
		}

		.user_balance_container {
			z-index: 1;
			height: 220rpx;
			display: flex;
			justify-content: space-around;
			margin-top: 34rpx;
			background-color: white;
			border: #D5ECFF solid 8rpx;
			border-radius: 26rpx;
			overflow: hidden;
			padding-bottom: 26rpx;

			.balance_text {
				color: #333;
				font-size: 28rpx;
			}

			.balance-usable {
				padding-left: 38rpx;
				width: calc((100% - 56rpx)/2);
				display: flex;
				flex-direction: column;
				justify-content: center;
				background-repeat: no-repeat;
				background-size: 100% 100%;
				background-image: url("/static/images/ic_balance.png");

				.balance_title {
					margin-bottom: 10rpx;
					color: #054EA0;
					font-size: 28rpx;
					font-weight: 700;
				}
			}

			.balance-disable {
				padding-left: 38rpx;
				width: calc((100% - 56rpx)/2);
				display: flex;
				flex-direction: column;
				justify-content: center;
				background-repeat: no-repeat;
				background-size: 100% 100%;
				margin-left: 20rpx;
				background-image: url("/static/images/ic_un_balance.png");

				.balance_title {
					margin-bottom: 10rpx;
					color: #EA3382;
					font-size: 28rpx;
					font-weight: 700;
				}
			}
		}

		.user_new_balance_container {
			margin-top: 46rpx;
			background-color: white;
			border-radius: 28rpx;
			z-index: 1;

			.balance-title {
				display: flex;
				align-items: center;
				font-size: 24rpx;
				color: #131313;
			}

			.balance-content {
				display: flex;
				flex-wrap: wrap;
				margin-top: 22rpx;
				background-color: rgba(240, 240, 240, 0.50);
				border-radius: 22rpx;
				margin-bottom: 32rpx;
				margin-left: 28rpx;
				margin-right: 28rpx;
				padding-top: 14rpx;
				padding-left: 30rpx;
				padding-right: 30rpx;
			}

			.balance-item {
				width: 50%;
				margin-bottom: 14rpx;
			}

			.balance-item-price {
				font-weight: bold;
				margin-top: 4rpx;
				color: black;
				font-size: 28rpx;
			}

		}
	}

	.function-container {
		background-color: white;
		border-radius: 20rpx;
		margin: 32rpx;

		.title {
			font-size: 28rpx;
			font-weight: 700;
			padding-top: 36rpx;
			padding-left: 32rpx;
		}

		.function-list {
			display: flex;
			flex-wrap: wrap;
			justify-content: flex-start;
		}

		.function-item {
			width: calc(25%);
			/* 25% 减去间距 */
			text-align: center;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 32rpx 0;
			font-size: 28rpx;
			color: #000;
		}

		.function-item image {
			width: 60rpx;
			height: 60rpx;
			margin-bottom: 12rpx;
		}
	}

	.popup-container {
		padding: 40rpx 0;
	}

	.popup-header {
		text-align: center;
	}

	.popup-conten {
		margin-top: 40rpx;
	}

	.popup-item {
		padding: 28rpx 0;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		color: #323233;

		image {
			height: 36rpx;
		}
	}

	.popup-cancel {
		padding: 28rpx;
		display: flex;
		justify-content: center;
		color: #646566;
		font-size: 32rpx;
	}

	.popup-auth-container {
		width: 578rpx;
		height: 590rpx;
		background-image: url('~@/static/images/ic_auth_pop_bg.png');
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		display: flex;
		flex-direction: column;
	}
</style>